import React from 'react';
import { ReplyGoal } from '../../types';
import { GlassButton, GlassInput } from '../ui';

interface GoalSelectorProps {
  /** 选中的目标 */
  selectedGoal: ReplyGoal | null;
  /** 目标变化回调 */
  onGoalChange: (goal: ReplyGoal | null) => void;
  /** 自定义目标文本 */
  customGoalText: string;
  /** 自定义目标文本变化回调 */
  onCustomGoalTextChange: (text: string) => void;
  /** 是否禁用 */
  disabled?: boolean;
}

/** 预设目标选项 */
const GOAL_OPTIONS: { value: ReplyGoal; label: string; icon: string }[] = [
  { value: 'comfort', label: '安慰', icon: '🤗' },
  { value: 'decline', label: '拒绝', icon: '🙅' },
  { value: 'thank', label: '感谢', icon: '🙏' },
  { value: 'apologize', label: '道歉', icon: '😔' },
  { value: 'congratulate', label: '祝贺', icon: '🎉' },
  { value: 'custom', label: '自定义', icon: '✏️' },
];

/**
 * 目标选择器组件
 * 用于选择回复目标（安慰、拒绝、感谢等）
 * Requirements: 2.1
 */
export const GoalSelector: React.FC<GoalSelectorProps> = ({
  selectedGoal,
  onGoalChange,
  customGoalText,
  onCustomGoalTextChange,
  disabled = false,
}) => {
  const handleGoalClick = (goal: ReplyGoal) => {
    if (selectedGoal === goal) {
      onGoalChange(null);
    } else {
      onGoalChange(goal);
    }
  };

  return (
    <div className="w-full">
      <label className="block text-emerald-700 text-sm font-medium mb-2">
        回复目标（可选）
      </label>
      
      <div className="flex flex-wrap gap-2 mb-3">
        {GOAL_OPTIONS.map((option) => (
          <GlassButton
            key={option.value}
            variant={selectedGoal === option.value ? 'primary' : 'default'}
            size="sm"
            onClick={() => handleGoalClick(option.value)}
            disabled={disabled}
          >
            <span className="mr-1">{option.icon}</span>
            {option.label}
          </GlassButton>
        ))}
      </div>
      
      {selectedGoal === 'custom' && (
        <div className="animate-fade-in">
          <GlassInput
            value={customGoalText}
            onChange={onCustomGoalTextChange}
            placeholder="请输入你的回复目标，如：委婉地推迟约会"
            disabled={disabled}
          />
        </div>
      )}
    </div>
  );
};

export default GoalSelector;
